<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>滤镜</title>

  <link rel="stylesheet" href="./css/filter.css">

</head>
<body>
  
  <div class="container">

    <div class="f1">
      <img src="./images/bg.jpg" alt="">
    </div>

    <div class="f2">
      <img src="./images/bg.jpg" alt="">
    </div>

    <div class="f3">
      <img src="./images/b05.svg" alt="">
    </div>

    <div class="f4">
      <img src="./images/bg.jpg" alt="">
    </div>

    <div class="f5">
      <img src="./images/bg.jpg" alt="">
    </div>
    
    <div class="f6">
      <img src="./images/bg.jpg" alt="">
    </div>

    <div class="f7">
      <img src="./images/bg.jpg" alt="">
    </div>

    <div class="f8">
      <img src="./images/bg.jpg" alt="">
    </div>

    <div class="f9">
      <img src="./images/bg.jpg" alt="">
    </div>
    
    <div class="f10">
      <img src="./images/bg.jpg" alt="">
    </div>

  </div>

  <hr>

  <div class="b1 g1">渐变色1</div>
  
  <div class="b1 g2">渐变色2</div>

  <div class="b1 g3">渐变色3</div>

  <div class="b2 g4">渐变色3</div>

  <div class="b2 g5">渐变色3</div>

</body>
</html>